<template>
<div>
    <!-- 这个例子用普通vue，下个例子用vuex -->
<h2 class='name'>当前数字是{{sum}}</h2>
<select v-model="n">
    <option :value='1'>1</option>
    <option :value='2'>2</option>
    <option :value='3'>3</option>
</select>
<button @click = 'increment'>+</button>
<button @click = 'decrement'>-</button>
<button @click = 'incrementOdd'>当前求和数为奇数再加</button>
<button @click = 'incrementWait'>等一等再加</button>
</div>
</template>

<script>
export default {
    name:'Count',
    data(){
        return {
            sum:0,
            n:1,   //这是用户选择的数字

        }
    },
    methods:{
        increment(){
             this.sum += this.n;

        },
        decrement(){
        this.sum -= this.n;
        },
        incrementOdd(){
            // 如果当前数是奇数我们加一
            if(this.sum%2){
                this.sum += this.n;
            }
        },
        incrementWait(){
            setTimeout(()=>{
            this.sum += this.n;
            },1000)
        }
    }
}
</script>


<style>
    .name{
        background: lightblue;
    }
</style>